<template>
  <div class="common-layout">
    <el-container>
      <!-- <el-header>
        <el-text class="mx-1" type="primary" size="large">题库生成工具</el-text>
      </el-header> -->
      <el-container>
        <el-aside class="aside-custom" :width="'350px'" :style="{ boxShadow: 'var(--el-box-shadow-lighter)' }">
          <div style="display: flex; align-items: center; margin: 20px;">
            <img src="./assets/avatar.svg" alt="avatar" style="width: 100px; height: 100px;margin-left: 10px" />
            <el-text class="mx-1" type="primary" size="large" style="font-size: 25px;margin-bottom: 10px;">
              题库生成工具
            </el-text>
          </div>
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo custom-menu"
            @select="handleMenuSelect"
            style="margin-left: 30px;"
          >
            <el-menu-item index="1">
              <el-icon><document /></el-icon>
              <span>题库生成</span>
            </el-menu-item>
            <el-menu-item index="2">
              <el-icon><edit /></el-icon>
              <span>试卷生成</span>
            </el-menu-item>
            <el-menu-item index="3">
              <el-icon><upload /></el-icon>
              <span>导出管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-container>
          <el-main>
            <FileUpload @file-read="handleContent" @question-read="handleProblem" v-if="activateMenu === '1'"/>
            <ProblemDisplay :content="problem" v-if="activateMenu === '2'"/>
          </el-main>
          <!-- <el-footer>
            <Operation :isButtonDisabled="isButtonDisabled" />
          </el-footer> -->
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import FileUpload from './components/FileUpload.vue'
import FileDisplay from './components/FileDisplay.vue'
import ProblemDisplay from './components/ProblemDisplay.vue'
import Operation from './components/Operation.vue'
import { Document, Edit, Upload } from '@element-plus/icons-vue'

const content = ref('')
const problem = ref('')
const isButtonDisabled = ref(true)
const activateMenu = ref('1')

function handleContent({ name, content: text }) {
  content.value = `📄 文件名：${name}\n\n${text}`
}

function handleProblem(question) {
  problem.value = question
  isButtonDisabled.value = false
}

function handleMenuSelect(index) {
  console.log('切换菜单:', index)
  // 你可以根据 index 切换不同页面内容（比如使用 v-if 控制显示）
  activateMenu.value = index
}
</script>

<style>
.common-layout {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.el-header {
  background-color: white;
}

.el-container {
  height: 100%;
  width: 100%;
}

.aside-custom {
  width: 200px;
  background-color: white;
  overflow: hidden;
}

.el-main {
  background-color: aliceblue;
  overflow: auto;
}



.custom-menu .el-menu-item {
  font-size: 18px; /* 字体变大 */
}

.custom-menu .el-menu-item .el-icon {
  font-size: 20px; /* 图标略大，匹配字体 */
  vertical-align: middle;
  margin-right: 8px;
}


</style>
